<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="文件管理"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList"
      row-key="id"
    >
      <template #filename="{ row }">
        <el-link type="primary" @click="previewFile(row.url)" :underline="false">{{ row.filename }}</el-link>
      </template>
      <template #operation="{ row }">
        <el-button v-auth="'sys.file.remove'" type="primary" link :icon="Download" @click="downloadFile(row)"> 下载 </el-button>
        <el-button v-auth="'sys.file.remove'" type="primary" link :icon="Delete" @click="deleteFile(row)"> 删除 </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Delete, Download } from '@element-plus/icons-vue';

import ProTable from '@/components/ProTable/index.vue';
import { getSysFileListApi, removeSysFileApi } from '@/api/modules/system/file';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';
import type { ISysFile } from '@/api/interface/system/file';
import { useOptionsStore } from '@/stores/modules/options';
import { useHandleData } from '@/hooks/useHandleData';
import { useRouter } from 'vue-router';
defineOptions({
  name: 'SysFileView'
});

const router = useRouter();
const optionsStore = useOptionsStore();
const proTableRef = ref<ProTableInstance>();
// 表格配置项
const columns: ColumnProps<ISysFile.Row>[] = [
  { type: 'selection', width: 80 },
  { prop: 'id', label: '文件标识', width: 120 },
  { prop: 'filename', label: '文件名(预览)' },
  { prop: 'dirTag', label: '目录标识', tag: true, width: 120 },
  { prop: 'size', label: '文件大小', width: 100 },
  { prop: 'objectName', label: 'objectName' },
  { prop: 'contextType', label: 'contextType', tag: true, width: 180 },
  { prop: 'eTag', label: 'eTag标识' },
  { prop: 'createTime', label: '创建时间', width: 165 },
  {
    prop: 'createId',
    label: '创建人',
    tag: true,
    enum: optionsStore.getDictOptions('dynamic_user_options'),
    fieldNames: {
      label: 'codeName',
      value: 'id',
      tagType: 'callbackShowStyle'
    },
    width: 140
  },
  // { prop: 'url', label: '文件', width: 80 },
  { prop: 'operation', label: '操作', width: 150, fixed: 'right' }
];
// 搜索条件项
const searchColumns: SearchProps[] = [{ prop: 'filename', label: '文件名', el: 'input' }];
// 获取table列表
const getTableList = (params: ISysFile.Query) => {
  let newParams = formatParams(params);
  return getSysFileListApi(newParams);
};
const formatParams = (params: ISysFile.Query) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.createTimeStart = newParams.createTime[0]);
  newParams.createTime && (newParams.createTimeEnd = newParams.createTime[1]);
  delete newParams.createTime;
  return newParams;
};
// 是否是图片
const isImage = (contextType: string) => {
  console.log('contextType', contextType);
  const imageMimeTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/tiff', 'image/webp', 'image/svg+xml'];
  return imageMimeTypes.includes(contextType);
};

// 删除文件
const deleteFile = async (params: any) => {
  await useHandleData(removeSysFileApi, { id: params.id, url: params.url }, `删除【${params.filename}】文件`);
  proTableRef.value?.getTableList();
};

// 下载文件
const downloadFile = row => {
  const a = document.createElement('a');
  a.href = row.url;
  a.download = row.filename || 'download';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

// 预览文件
const previewFile = url => {
  router.push(`/officeview?src=${url}`);
};
</script>
